<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./css/bootstrap.min.css">
    </head>
    <body>
    <div class="container" ng-app="myApp" ng-controller="cartController">
        <table class="table" ng-show="cart.length>0">
            <thead>
                    <th>产品名字</th>
                    <th >购买数量</th>
                    <th>产品操作</th>
                    <th>产品单价</th>
                    <th>产品总价</th>
            </thead>
            <tbody>
                <tr ng-repeat="item in cart">
                    <td>{{item.name}}</td>
                    <td>{{item.quantity}}</td>
                    <td><button ng-click="reduce(item.name)" class="btn btn-primary">-</button><input type="text" value ng-model="item.quantity"/><button ng-click="add(item.name)" class="btn btn-primary">+</button></td>
                    <td>{{item.price}}</td>
                    <td>{{item.quantity*item.price}}</td>
                </tr>
                <tr>
                    <td>总购买价{{totalPrice()}}</td>
                    <td></td>
                    <td>总购买数{{totalQuantity()}}</td>
                    <td></td>
                    <td></td>
                    <td><button ng-click="clearall()" class="btn btn-danger">清空购物车</button></td>
                </tr>
            </tbody>
        </table>
        <p class="text-center" style="cursor:pointer" ng-show="!cart.length" ng-click="back()">你的购物车为空,返回商城</p>
    </div>
        <script src='./js/angular.min.js'></script>
        <script src="./js/jquery-1.11.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            var app = angular.module('myApp',[]);
            app.controller('cartController',function($scope){
                let username = localStorage.getItem('username');
                let data = {
                    username:username
                }
                $.post('http://localhost:3000/xuanran',data,function(res,textStatus,xhr){
                    console.log(res[0].shopcar);
                    $scope.$apply(function(){
                        $scope.cart = res[0].shopcar
                        $scope.totalPrice = function(){
                            var total = 0;
                            angular.forEach($scope.cart,function(item){
                                total+=item.quantity * item.price;
                            })
                            return total;
                        }
                        $scope.totalQuantity = function(){
                            var total = 0;
                            angular.forEach($scope.cart,function(item){
                                total+=parseInt(item.quantity);
                            })
                            return total;
                        }
                        $scope.reduce = function(name){
                            let data = {
                                name:name,
                                username:username
                            }
                            $.post('http://localhost:3000/jian',data,function(res,textStatus,xhr){
                                $scope.$apply(function(){
                                    $scope.cart = res[0].shopcar
                                })
                            })
                        }
                        $scope.add = function(name){
                            let data = {
                                name:name,
                                username:username
                            }
                            $.post('http://localhost:3000/jia',data,function(res,textStatus,xhr){
                                $scope.$apply(function(){
                                    $scope.cart = res[0].shopcar
                                })
                            })
                        }
                        $scope.clearall = function(){
                            let data = {
                                username:username
                            }
                            $.post('http://localhost:3000/clear',data,function(res,textStatus,xhr){
                                $scope.$apply(function(){
                                    $scope.cart = res[0].shopcar
                                })
                            })
                        }
                         $scope.back = function(){
                            window.location.href="http://localhost:3000/goodsdetail"
                         }
                    })
                    
                })
               
            })
        </script>
    </body>
</html>
